<template>
    <div>
      <ul>
        <!-- v-for 更新检查 
        1.数组变更方法: push,pop,shift,unshift,splice
          直接使用,修改原数据并且触v-for更新
        2.数组非变更方法: filter，slice，concat不会修改原数据,若要更新v-for 需要重新赋值 例: list = list.filter(()=>...)
        3.非数组方法修改: list[e] = a会修改原数据,不会触发-for更新,解决? 用set方法修改 
          例:this.$set(目标数组，下标，修改后的值)  
        -->
        <li v-for="(name,index) in nameList" :key="index">
          {{ name }}
        </li>
      </ul>
      <button @click="changeFn">修改</button>
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return{
        nameList:['单春雷','胡大帅','陈鑫','顾明杰','瑶瑶','戴岱','智慧','胡忆华','鞠洋','阿珍']
      }
    },
    methods:{
      changeFn(){
        // 非数组方法修改值,数组值变化,v-for不会更新
        // this.nameList[1] = 大帅
        // v-for 使用$set方法// this.$set(目标数组，下标，修改后的值)
        this.$set(this.nameList,1,'大帅')
        console.log('this.nameList',this.nameList);
      }
    }
  }
  </script>
  
  <style>
  
  </style>